<template>
  <div class="column-card" @click="handleClick">
    <!-- 左侧头像和图标 -->
    <div class="card-left">
      <el-avatar 
        :size="48" 
        :src="getMediaUrl(column.userAvatar)"
        class="user-avatar"
      >
        {{ column.userNickname?.charAt(0) }}
      </el-avatar>
      <!-- <div class="space-icon">
        <el-icon size="20"><Notebook /></el-icon>
      </div> -->
    </div>

    <!-- 中间内容区 -->
    <div class="card-content">
      <!-- 头部信息 -->
      <div class="content-header">
        <span class="author-name">{{ column.userNickname }}</span>
        <span class="post-meta">
          <!-- <span class="divider">•</span> -->
          <span>Posted in a Space you might like</span>
          <!-- <span class="divider">•</span> -->
          <span class="post-time">{{ formatTime(column.createdTime) }}</span>
        </span>
      </div>

      <!-- 标题 -->
      <h3 class="post-title">{{ column.name }}</h3>

      <!-- 描述 -->
      <p class="post-description" v-if="column.description">
        {{ column.description }}
      </p>
    </div>

    <!-- 右侧更多按钮 -->
    <div class="card-right">
      <button class="more-btn" @click.stop="handleMore">
        <el-icon><MoreFilled /></el-icon>
      </button>
    </div>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import {ElMessage} from 'element-plus'
import {Notebook, MoreFilled} from '@element-plus/icons-vue'
import {getMediaUrl} from '@/utils/media'
import {formatCount} from '@/utils/format'
import {toggleFollowColumn} from '@/api/column'
import {useUserStore} from '@/stores/user'

const props = defineProps({
  column: {
    type: Object,
    required: true
  },
  showActions: {
    type: Boolean,
    default: true
  },
  clickable: {
    type: Boolean,
    default: true
  }
})

const emit = defineEmits(['click', 'follow-change'])

const userStore = useUserStore()
const followLoading = ref(false)

// 格式化时间
const formatTime = (time) => {
  if (!time) return ''
  const date = new Date(time)
  const now = new Date()
  const diff = now - date
  const seconds = Math.floor(diff / 1000)
  const minutes = Math.floor(seconds / 60)
  const hours = Math.floor(minutes / 60)
  const days = Math.floor(hours / 24)
  
  if (days > 30) {
    const month = date.toLocaleDateString('en-US', { month: 'long', day: 'numeric' })
    return month
  } else if (days > 0) {
    return `${days}d`
  } else if (hours > 0) {
    return `${hours}h`
  } else if (minutes > 0) {
    return `${minutes}m`
  } else {
    return 'Just now'
  }
}

const handleClick = () => {
  if (props.clickable) {
    emit('click', props.column)
  }
}

const handleMore = () => {
  // 更多操作菜单
  console.log('More options')
}

const handleFollow = async () => {
  if (!userStore.isLoggedIn) {
    ElMessage.warning('请先登录')
    return
  }

  followLoading.value = true
  try {
    const response = await toggleFollowColumn(props.column.id)
    if (response.code === 200) {
      props.column.isFollowed = response.data
      if (response.data) {
        props.column.followerCount = (props.column.followerCount || 0) + 1
        ElMessage.success('Followed successfully')
      } else {
        props.column.followerCount = Math.max(0, (props.column.followerCount || 0) - 1)
        ElMessage.success('Unfollowed')
      }
      
      emit('follow-change', {
        columnId: props.column.id,
        isFollowed: props.column.isFollowed
      })
    } else {
      ElMessage.error(response.message || '操作失败')
    }
  } catch (error) {
    console.error('关注专栏失败:', error)
    ElMessage.error('操作失败')
  } finally {
    followLoading.value = false
  }
}
</script>

<style lang="scss" scoped>
.column-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: white;
  border-bottom: 1px solid #e4e6e8;
  cursor: pointer;
  transition: background 0.2s ease;

  &:hover {
    background: #fafafa;
  }

  // 左侧头像和图标
  .card-left {
    position: relative;
    flex-shrink: 0;

    .user-avatar {
      background: #B92B27;
      color: white;
      font-weight: 600;
    }

    .space-icon {
      position: absolute;
      bottom: -4px;
      right: -4px;
      width: 24px;
      height: 24px;
      background: #ffffff;
      border: 2px solid #ffffff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

      .el-icon {
        color: #636466;
      }
    }
  }

  // 中间内容区
  .card-content {
    flex: 1;
    min-width: 0;

    .content-header {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 4px;
      margin-bottom: 8px;
      font-size: 13px;

      .author-name {
        font-weight: 600;
        color: #1a1a1a;
      }

      .post-meta {
        display: flex;
        align-items: center;
        gap: 4px;
        color: #939598;
        font-size: 12px;

        .divider {
          margin: 0 2px;
        }

        .post-time {
          color: #939598;
        }
      }
    }

    .post-title {
      font-size: 15px;
      font-weight: 600;
      color: #1a1a1a;
      margin: 0 0 8px 0;
      line-height: 1.4;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      // -webkit-box-orient: vertical;
    }

    .post-description {
      font-size: 14px;
      color: #636466;
      margin: 0;
      line-height: 1.5;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }

  // 右侧更多按钮
  .card-right {
    flex-shrink: 0;

    .more-btn {
      width: 32px;
      height: 32px;
      border: none;
      background: transparent;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: #939598;
      transition: all 0.2s ease;

      &:hover {
        background: #e4e6e8;
        color: #636466;
      }

      .el-icon {
        font-size: 20px;
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .column-card {
    padding: 12px;
    gap: 10px;

    .card-left {
      .user-avatar {
        width: 40px;
        height: 40px;
      }

      .space-icon {
        width: 20px;
        height: 20px;

        .el-icon {
          font-size: 14px;
        }
      }
    }

    .card-content {
      .content-header {
        font-size: 12px;

        .post-meta {
          font-size: 11px;
        }
      }

      .post-title {
        font-size: 14px;
      }

      .post-description {
        font-size: 13px;
      }
    }

    .card-right {
      .more-btn {
        width: 28px;
        height: 28px;

        .el-icon {
          font-size: 18px;
        }
      }
    }
  }
}
</style>
